const { defineConfig } = require('@vue/cli-service')
const Mock = require('mockjs')
// 模拟商品列表数据
const { list } = Mock.mock({
  'list|40': [{
    'id|+1': 1, // id从1开始，每次递增1
    'image': '@image(200X200,@color)', // 生成200X200随机颜色的图片
    'title': '@ctitle(3,50)', // 生成3到50个汉字的标题
    'price|1-100.1-2': 1 // 生成1到100之间的浮点数，小数点后1到2位
  }]
})
// 模拟分类列表数据
const { products } = Mock.mock({
  'products|50': [
    {
      'id|+1': 1,
      'classify': '@pick(["手机数码","礼品鲜花","男装女装"])',
      'title': '@ctitle(3,5)',
      'image': '@image(100X100,@color)'
    }
  ]
})
module.exports = defineConfig({
  transpileDependencies: true,
  // webpack提供的开发者服务器
  devServer: {
    setupMiddlewares: (mid, dev) => {
      // 列表接口
      // dev.app.get('/api/list', (req, res) => {
      //   res.send({
      //     code: 200,
      //     data: list,
      //     total: list.length
      //   })
      // })

      // 列表接口-分页请求
      dev.app.get('/api/list', (req, res) => {
        const { pagination, pageNum } = req.query // 获取前端传过来的参数：页码、条数
        res.send({
          code: 200,
          // 1  10  ---- 0  1   2  3   4  5  6  7  8  9 
          //  2  10  ---- 10  11   12  。。。 19 
          data: list.slice((pagination - 1) * pageNum, pagination * pageNum),
          total: list.length
        })
      })
      // 详情接口
      dev.app.get('/api/detail', (req, res) => {
        const { id } = req.query
        res.send({
          code: 200,
          // find(): 查找数组中符合条件的第一个元素
          data: list.find(item => item.id == id)
        })
      })
      // 分类接口
      dev.app.get('/api/kind', (req, res) => {
        const { key } = req.query
        res.send({
          code: 200,
          data: products.filter(item => item.classify == key)
        })
      })
      // 搜索接口
      dev.app.get('/api/search', (req, res) => {
        const { value } = req.query
        res.send({
          code: 200,
          data: list.filter(item => item.title.includes(value))
        })
      })
      return mid
    }
  }
})
